<!--  -->
<template>
  <el-table :data="commodityTableData" border style="width: 100%">
    <el-table-column align="center" type="selection"> </el-table-column>
    <el-table-column align="center" prop="id" label="编号"> </el-table-column>
    <el-table-column align="center" label="商品图片">
      <template #default="{ row }">
        <el-image style="width: 100px; height: 100px" :src="row.pic" />
      </template>
    </el-table-column>
    <el-table-column align="center" size="large" label="商品名称" width="250">
      <template #default="{ row }">
        <p>{{ row.name }}</p>
        <div>
          <span>品牌:</span>
          <span>{{ row.brandName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="价格/货号">
      <template #default="{ row }">
        <p><span>价格</span> ￥{{ row.price }}</p>
        <div>
          <span>货号:</span>
          <span>{{ row.giftPoint }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="标签">
      <template #default="{ row }">
        <div>
          <span>上架：</span>
          <el-switch
            v-model="row.publishStatus"
            :active-value="1"
            :inactive-value="0"
            @change="publishStatusChange(row.id, row.publishStatus)"
          />
        </div>
        <div>
          <span>新品：</span>
          <el-switch
            v-model="row.newStatus"
            :active-value="1"
            :inactive-value="0"
          />
        </div>
        <div>
          <span>推荐：</span>
          <el-switch
            v-model="row.recommandStatus"
            :active-value="1"
            :inactive-value="0"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sort" align="center" label="排序"> </el-table-column>
    <el-table-column align="center" label="SKU库存">
      <template #default="{ row }">
        <el-button type="primary" :icon="Edit" circle @click="SkuFn(row.id)" />
      </template>
    </el-table-column>
    <el-table-column align="center" prop="sale" label="销量"> </el-table-column>
    <el-table-column align="center" label="审核状态">
      <template #default="{ row }">
        <div>
          <p v-if="row.verifyStatus === 0 ? true : false">未审核</p>
          <p v-if="row.verifyStatus === 1 ? true : false">审核通过</p>
          <p>
            <el-button type="primary" link>审核详情</el-button>
          </p>
        </div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作">
      <template #default="{ row }">
        <div>
          <p><el-button size="small">编辑</el-button></p>
          <p>
            <el-button
              size="small"
              type="danger"
              @click="removeGoods(row.id, row.deleteStatus)"
              >删除</el-button
            >
          </p>
        </div>
      </template>
    </el-table-column>
  </el-table>

  <!-- 下拉 -->
  <div class="goods-select">
    <el-select v-model="value" class="select" placeholder="Select" size="large">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button type="primary" size="large">确定</el-button>
  </div>

  <div class="sorter">
    <!-- 分页  -->
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 点击删除 -->
  <deleteGood :showDelGoods="showDelGoods" @hidden="hiddenDel"></deleteGood>

  <!-- 库存组件 -->
  <productSku :showSku="showSku" @hidden="hiddenSku" :pid="skuPid" />
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, Ref } from "vue";
import * as http from "../../request/http";
import { Edit } from "@element-plus/icons-vue";
import deleteGood from "../pms/components/productDel.vue";
import productSku from "../pms/components/productSKU.vue";
import { ElMessage } from "element-plus";

// 下拉框批量选择
const value = ref("批量操作");
const options = [
  {
    value: 1,
    label: "商品上架",
  },
  {
    value: 0,
    label: "商品下架",
  },
  {
    value: 1,
    label: "设为推荐",
  },
  {
    value: 0,
    label: "取消推荐",
  },
  {
    value: 1,
    label: "设为新品",
  },
  {
    value: 0,
    label: "取消新品",
  },
  {
    value: 0,
    label: "转移到分类",
  },
  {
    value: 0,
    label: "移入回收站",
  },
];
// 获取商品页数据
const commodityTableData = ref([]);
async function fetchData(
  keyword: string = "",
  pageNum: number = 1,
  pageSize: number = 5
) {
  let res = await http.productList({
    keyword,
    pageNum,
    pageSize,
  });
  if (res.code === 200) {
    // console.log(res);
    commodityTableData.value = res.data.list;
    // 总条数
    total.value = res.data.total;
  }
}
fetchData();
// 分页 组件
let currentPage = ref(1);
let pageSize = ref(5);
let total = ref(0);

// 一页几条 条码
const handleSizeChange = (size: number) => {
  // console.log(size);
  fetchData("", currentPage.value, size);
};
// 页码
const handleCurrentChange = (curPage: number) => {
  fetchData("", curPage, pageSize.value);
};

// 点击删除
let showDelGoods = ref(false);
let ids = ref(0);
let delStatusId = ref(0);

function removeGoods(id: number, delStatus: number) {
  // console.log("这是id", id);
  // console.log("这是del", delStatus);
  showDelGoods.value = true;
  ids.value = id;
  delStatusId.value = 1;
}
// 子组件点击取消 隐藏删除弹框
async function hiddenDel(flag?: string) {
  showDelGoods.value = false;
  if (flag === "reloadDel") {
    let res = await http.updateDelProduct({
      deleteStatus: delStatusId.value,
      ids: ids.value,
    });

    if (res.code === 200) {
      fetchData("", currentPage.value, pageSize.value);
    }
  }
}

// 点击库存
let showSku = ref(false);
let skuPid = ref(0);
function SkuFn(pid: number) {
  skuPid.value = pid;
  showSku.value = true;
}
function hiddenSku() {
  showSku.value = false;
}

// 修改上架状态

type type = "info" | "success" | "warning" | "error";
let messages = ref("");
let types = ref("info") as Ref<type>;
const openToast = (message: string, type: type) => {
  ElMessage({
    message: message,
    type: type,
  });
};

async function publishStatusChange(id: number, publishStatus: number) {
  let res = await http.updatePublishStatus({
    ids: id,
    publishStatus: publishStatus,
  });

  console.log(res);
  if (res.code === 200) {
    types.value = "success";
    openToast(res.message, types.value);
  }
}
</script>
<style lang="less" scoped global>
.sorter {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

.goods-select {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  .select {
    margin-right: 10px;
  }
}
</style>
